<template>
	<view class="modify-password-page">
		<view class="content">
			<view class="current-phone">
				<text class="label">当前登录号码：</text>
				<text class="phone-number">{{ userInfo.phone }}</text>
			</view>
			<view class="input-item">
				<input type="text" placeholder="请输入验证码" v-model="account" />
				<button class="get-code-btn" :disabled="timer !== null" @click="getVerificationCode">
					{{ timer ? `${countdown}秒后重试` : '获取验证码' }}
				</button>
			</view>
			<view class="input-item">
				<input :type="passwordVisible ? 'text' : 'password'" placeholder="请输入新的登录密码" v-model="newPassword" />
				<uni-icons type="eye" size="26" @click="togglePasswordVisibility" v-if="passwordVisible"></uni-icons>
				<uni-icons type="eye-slash" size="26" @click="togglePasswordVisibility" v-else></uni-icons>
			</view>
			<button class="confirm-btn" type="primary" :disabled="canModify" @click="confirmModify">确定修改</button>
		</view>
	</view>
</template>

<script>
	import {
		sms,
		changePsw
	} from "@/api/userApi/user.js"
	export default {
		data() {
			return {
				account: '',
				newPassword: '',
				passwordVisible: false,
				canModify: true,
				userInfo: {},
				countdown: 60, 
				timer: null, 
			};
		},
		methods: {
			getVerificationCode() {
				sms({
					phone: this.userInfo.phone
				}).then(res => {
					if (res.code == 200) {
						if (this.timer) {
							return;
						}
						this.countdown = 60;
						this.timer = setInterval(() => {
							if (this.countdown > 0) {
								this.countdown--;
							} else {
								clearInterval(this.timer);
								this.timer = null;
								this.countdown = 60;
							}
						}, 1000);
						uni.showToast({
							title: '验证码已发送',
							icon: 'none'
						});
					}
				})
			},
			togglePasswordVisibility() {
				this.passwordVisible = !this.passwordVisible;
			},
			confirmModify() {
				if (!this.account || !this.newPassword) {
					uni.showToast({
						title: '请输入验证码和新密码',
						icon: 'none'
					});
					return;
				} else {
					this.canModify = true;
					changePsw({
						phone:this.userInfo.phone,
						sms_code:this.account,
						password:this.newPassword
					}).then(res=>{
						if(res.code == 200){
							uni.showToast({
								title: '密码修改成功',
								icon: 'success'
							});
							uni.removeStorageSync("token")
							uni.removeStorageSync("unserInfo")
							setTimeout(()=>{
								uni.switchTab({
									url:"/pages/login/login"
								})
							},1000)
						}
					})
				}
			}
		},
		computed: {
			isFormValid() {
				return this.account && this.newPassword;
			}
		},
		watch: {
			isFormValid(newVal) {
				this.canModify = !newVal;
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync("unserInfo")
		},
		onUnload() {
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
		},
	};
</script>

<style>
	page {
		background: #f5f5f5;
	}

	.content {
		flex: 1;
		padding: 40rpx 20rpx;
	}

	.current-phone {
		margin-bottom: 40rpx;
		text-align: center;
	}

	.label {
		font-size: 29rpx;
		color: #666666;
	}

	.phone-number {
		font-size: 38rpx;
		color: #666666;
		margin-left: 10rpx;
	}

	.input-item {
		height: 70rpx;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
	}

	input {
		flex: 1;
		font-size: 28rpx;
		border: none;
		outline: none;
	}

	.get-code-btn {
		font-size: 28rpx;
		color: #666;
		padding: 0 20rpx;
		border-left: 1rpx solid #eee;
	}

	.confirm-btn {
		border-radius: 74rpx 74rpx 74rpx 74rpx;
		color: #fff;
		font-size: 32rpx;
		height: 80rpx;
		margin-top: 60rpx;
	}

	.confirm-btn[disabled] {
		opacity: 0.5;
	}
</style>